<template>
  <div id="user" style="padding-top:14px;height: 100%;">
    <!-- 1)主页开始 -->
    <el-container style="height:100%;">

      <div style="padding-top:10px;width:100%;">
        <el-main style="padding:0px;">
          <!-- 头部)查询框开始，所有的查询条件全部写在 el-header 标签内 一行查询框底部最大-->
          <el-header style="height:auto;">
            <div style="padding:0px;">
              <div style="width:100%">
                <el-input v-model="queryArr.projectName" placeholder="项目名称" clearable size="mini" style="width:15%;"></el-input>
                <el-select v-model="queryArr.deptId" placeholder="责任部门" style="width:15%" size="mini">
                  <el-option v-for="item in selects2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="queryArr.typeId" placeholder="项目类别" style="width:15%" size="mini">
                    <el-option v-for="item in selects3" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <div style="margin-right:0; float:right;">
                  <el-button type="primary" icon="el-icon-search" @click="queryList" size="mini">查询</el-button>
                  <el-button @click="removeAll" icon="el-icon-delete" size="mini">清空</el-button>
                  <el-button @click="addOne" size="mini">新增</el-button>
                  <el-button @click="deleteAll" icon="el-icon-delete" size="mini">批量删除</el-button>
                </div>
              </div>
            </div>
          </el-header>
          <!-- 头部)查询框结束，所有的查询条件全部写在 el-header 标签内-->

          <!-- 数据展示框开始 所有的数据展示全部写在 el-main 标签内 如果上边的查询框一行则下方展示框表格height为500，两行为450-->
          <div style="padding-top:10px; height:100%;">
            <el-table @selection-change="byIds" :data="tableData" :border="true" highlight-current-row size=mini style="width: 100%;">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column v-if='false' prop="projectId" label="ID">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称">
              </el-table-column>
              <el-table-column prop="deptId" label="责任地区/部门">
              </el-table-column>
              <el-table-column prop="typeId" label="项目类别">
              </el-table-column>
              <el-table-column prop="createType" label="新建或续建">
              </el-table-column>
              <el-table-column prop="buildStatus" label="立项审批状态">
              </el-table-column>
              <el-table-column prop="buildApprovalProblem" label="立项审批问题">
              </el-table-column>
              <el-table-column prop="planStatus" label="规划审批状态">
              </el-table-column>
              <el-table-column prop="planApprovalProblem" label="规划审批问题">
              </el-table-column>
              <el-table-column prop="areaStatus" label="国土审批状态">
              </el-table-column>
              <el-table-column prop="areaApprovalProblem" label="国土审批问题">
              </el-table-column>
              <el-table-column prop="envStatus" label="环评审批状态">
              </el-table-column>
              <el-table-column prop="envApprovalProblem" label="环评审批问题">
              </el-table-column>
              <el-table-column prop="actPermission" label="施工许可手续">
              </el-table-column>
              <el-table-column prop="elseProblem" label="其他审批问题">
              </el-table-column>
              <el-table-column prop="needDeptProblem" label="需政府解决问题">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="update(scope.row)">修改</el-button>
                  <!--<el-button type="text" size="mini" @click="deletes(scope.row,'delete')">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" background layout="prev, pager, next" :total="totals" class='el-pagination-sugon'>
            </el-pagination>
          </div>
          <!-- 数据展示框结束 所有的数据展示全部写在 el-main 标签内-->
        </el-main>
      </div>
      <!-- 1.2)中部查询与数据展示结束-->
    </el-container>
    <!-- 2)弹出框页代码开始 -->
    <div>
      <el-dialog :title="title" width="50%" :visible.sync="dialogFormVisible">
        <table class="table_border" style="width:100%">
          <tbody>
            <tr>
              <td class="t_left">
                <span>项目名称&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="projectName" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>责任地区/部门</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-select v-model="typeId" placeholder="请选择" style="width:60%" size="mini">
                  <el-option v-for="item in selects2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </td>
            </tr>
            <tr>
              <td class="t_left">
                <span>项目类别</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-select v-model="deptId" placeholder="请选择" style="width:60%" size="mini">
                  <el-option v-for="item in selects3" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </td>
              <td class="t_left">
                <span>新建或续建&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="createType" clearable>

                </el-input>
              </td>
            </tr>
            <tr>

              <td class="t_left">
                <span>立项审批状态&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <!--<td>-->
                <!--<el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="buildStatus" clearable>-->

                <!--</el-input>-->
              <!--</td>-->
              <td>
                <el-select v-model="buildStatus" placeholder="请选择" style="width:60%" size="mini">
                  <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </td>
              <td class="t_left">
                <span>立项审批问题&nbsp;</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="buildApprovalProblem" clearable>

                </el-input>
              </td>

            </tr>
            <tr>
            <td class="t_left">
              <span>规划审批状态&nbsp;</span>
              <span style="color:red">*</span>
            </td>
            <td>
              <el-select v-model="planStatus" placeholder="请选择" style="width:60%" size="mini">
                <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </td>
            <td class="t_left">
              <span>规划审批问题&nbsp;</span>
            </td>
            <td>
              <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="planApprovalProblem" clearable>

              </el-input>
            </td>

            </tr>
            <tr>
              <td class="t_left">
                <span>国土审批状态</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-select v-model="areaStatus" placeholder="请选择" style="width:60%" size="mini">
                  <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </td>
              <td class="t_left">
                <span>国土审批问题&nbsp;</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="areaApprovalProblem" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>环评审批状态</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-select v-model="envStatus" placeholder="请选择" style="width:60%" size="mini">
                  <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

              </td>
              <td class="t_left">
                <span>环评审批问题</span>
                <span style="color:red">*</span>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="envApprovalProblem" clearable>

                </el-input>
              </td>

            </tr>
            <tr>

              <td class="t_left">
                <span>施工许可手续&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="actPermission" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>其他审批问题</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="elseProblem" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>需政府解决问题&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="needDeptProblem" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span style="color:red"></span>
                <span>立项办结时间&nbsp;</span>
              </td>
              <td>
                <el-date-picker v-model="buildOverTime" class="el-rows-kj-sugon" style="width:60%" type="date" size="mini" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td class="t_left">
                <span>立项批复文号&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="buildApprovalNum" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>立项证照号</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="buildLicenseNum" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>立项到达环节&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="buildNode" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
              <td class="t_left">
                <span style="color:red"></span>
                <span>规划办结时间&nbsp;</span>
              </td>
              <td>
                <el-date-picker v-model="planOverTime" class="el-rows-kj-sugon" style="width:60%" type="date" size="mini" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td class="t_left">
                <span>规划批复文号&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="planApprovalNum" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>规划证照号</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="planLicenseNum" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>规划到达环节&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="planNode" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
              <td class="t_left">
                <span style="color:red"></span>
                <span>国土办结时间&nbsp;</span>
              </td>
              <td>
                <el-date-picker v-model="areaOverTime" class="el-rows-kj-sugon" style="width:60%" type="date" size="mini" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td class="t_left">
                <span>国土批复文号&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="areaApprovalNum" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>国土证照号</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="areaLicenseNum" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>国土到达环节&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="areaNode" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
              <td class="t_left">
                <span style="color:red"></span>
                <span>环评办结时间&nbsp;</span>
              </td>
              <td>
                <el-date-picker v-model="envOverTime" class="el-rows-kj-sugon" style="width:60%" type="date" size="mini" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td class="t_left">
                <span>环评批复文号&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="envApprovalNum" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>环评证照号</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="envLicenseNum" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>环评到达环节&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="envNode" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
            <tr>
              <td class="t_left">
                <span>填报人</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="createUser" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>填报人电话&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="createTel" clearable>

                </el-input>
              </td>
            </tr>
            <tr>
              <td class="t_left">
                <span>修改人</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="updateUser" clearable>

                </el-input>
              </td>
              <td class="t_left">
                <span>修改人电话&nbsp;</span>
                <span style="color:red">*</span>
              </td>
              <td>
                <el-input placeholder="请输入内容" style="width:60%;" size="mini" v-model="updateTel" clearable>

                </el-input>
              </td>
            </tr>


          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 2)弹出框页代码结束  -->
  </div>
</template>
<script>
export default {
  // 全局变量区
  data() {
    return {
      ids: [],
      title: '',
      queryArr: {
        projectName: '',
        typeId: '',
        deptId: ''
      },
      selects:  [{
        value: '已办结',
        label: '已办结'
      }, {
        value: '未办结',
        label: '未办结'
      }, {
        value: '企业未申请办理',
        label: '企业未申请办理'
      }],
      selects2: [{
        value: '0',
        label: '昆都仑区'
      }, {
        value: '1',
        label: '住建局'
      }],
      selects3: [{
        value: '0',
        label: '城建类'
      }, {
        value: '1',
        label: '房地产'
      }],
      input: '',
      value: '请选择',
      loading: false,
      isShow: false,
      data: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      totals: 0,
      currentPage: 1,
      dialogFormVisible: false,

      projectId: '',
      projectName: '',
      deptId: '',
      typeId: '',
      deptName: '',
      typeName: '',
      createType: '',
      buildStatus: '',
      buildApprovalProblem: '',
      planStatus: '',
      planApprovalProblem: '',
      areaStatus: '',
      areaApprovalProblem: '',
      envStatus: '',
      envApprovalProblem: '',
      elseProblem: '',
      needDeptProblem: '',
      createUser: '',
      createTel: '',
      createTime: '',
      updateUser: '',
      updateTel: '',
      updateTime: '',
      buildOverTime: '',
      buildApprovalNum: '',
      buildLicenseNum: '',
      buildNode: '',
      planOverTime: '',
      planApprovalNum: '',
      planLicenseNum: '',
      planNode: '',
      areaOverTime: '',
      areaApprovalNum: '',
      areaLicenseNum: '',
      areaNode: '',
      envOverTime: '',
      envApprovalNum: '',
      envLicenseNum: '',
      envNode: '',
      actPermission: ''
    }
  },
  // 函数区
  methods: {
    // 2.1)显示与搜索,
    queryList() { // queryList(orgid)方法带参,则orgid不读取初始值
      let datas = {}
      datas.queryArr = this.queryArr
      datas.pageSize = this.pageSize
      datas.pageNum = this.pageNum
      this.$store
        .dispatch('UserQueryList1', datas)
        .then(res => {
          this.tableData = []
          res.list.forEach((item) => {
            this.tableData.push(item)
          })
          this.totals = this.tableData.length
        })
        .catch(() => { })
    },
    // 2.2)清空查询
    removeAll() {
      this.queryArr = []
    },
    // 3.1)新增模态框
    addOne() {
      this.title = '新增'
      this.dialogFormVisible = true
      this.projectName = ''
      this.deptId = ''
      this.typeId = ''
      this.deptName = ''
      this.typeName = ''
      this.createType = ''
      this.buildStatus = ''
      this.buildApprovalProblem = ''
      this.planStatus = ''
      this.planApprovalProblem = ''
      this.areaStatus = ''
      this.areaApprovalProblem = ''
      this.envStatus = ''
      this.envApprovalProblem = ''
      this.elseProblem = ''
      this.needDeptProblem = ''
      this.createUser = ''
      this.createTel = ''
      this.createTime = ''
      this.updateUser = ''
      this.updateTel = ''
      this.updateTime = ''
      this.buildOverTime = ''
      this.buildApprovalNum = ''
      this.buildLicenseNum = ''
      this.buildNode = ''
      this.planOverTime = ''
      this.planApprovalNum = ''
      this.planLicenseNum = ''
      this.planNode = ''
      this.areaOverTime = ''
      this.areaApprovalNum = ''
      this.areaLicenseNum = ''
      this.areaNode = ''
      this.envOverTime = ''
      this.envApprovalNum = ''
      this.envLicenseNum = ''
      this.envNode = ''
      this.actPermission = ''
    },
    // 3.2)编辑模态框
    update(res) {
      this.title = '修改'
      this.dialogFormVisible = true
      this.projectName = res.projectName
      this.deptId = res.deptId
      this.typeId = res.typeId
      this.deptName = res.deptName
      this.typeName = res.typeName
      this.createType = res.createType
      this.buildStatus = res.buildStatus
      this.buildApprovalProblem = res.buildApprovalProblem
      this.planStatus = res.planStatus
      this.planApprovalProblem = res.planApprovalProblem
      this.areaStatus = res.areaStatus
      this.areaApprovalProblem = res.areaApprovalProblem
      this.envStatus = res.envStatus
      this.envApprovalProblem = res.envApprovalProblem
      this.elseProblem = res.elseProblem
      this.needDeptProblem = res.needDeptProblem
      this.createUser = res.createUser
      this.createTel = res.createTel
      this.createTime = res.createTime
      this.updateUser = res.updateUser
      this.updateTel = res.updateTel
      this.updateTime = res.updateTime
      this.buildOverTime = res.buildOverTime
      this.buildApprovalNum = res.buildApprovalNum
      this.buildLicenseNum = res.buildLicenseNum
      this.buildNode = res.buildNode
      this.planOverTime = res.planOverTime
      this.planApprovalNum = res.planApprovalNum
      this.planLicenseNum = res.planLicenseNum
      this.planNode = res.planNode
      this.areaOverTime = res.areaOverTime
      this.areaApprovalNum = res.areaApprovalNum
      this.areaLicenseNum = res.areaLicenseNum
      this.areaNode = res.areaNode
      this.envOverTime = res.envOverTime
      this.envApprovalNum = res.envApprovalNum
      this.envLicenseNum = res.envLicenseNum
      this.envNode = res.envNode
      this.actPermission = res.actPermission
    },
    // 3.3)发送新增和修改的请求
    submitAdd() {
      let datas = {}
      datas.projectId = this.projectId
      datas.projectName = this.projectName
      datas.deptId = this.deptId
      datas.typeId = this.typeId
      datas.deptName = this.deptName
      datas.typeName = this.typeName
      datas.createType = this.createType
      datas.buildStatus = this.buildStatus
      datas.buildApprovalProblem = this.buildApprovalProblem
      datas.planStatus = this.planStatus
      datas.planApprovalProblem = this.planApprovalProblem
      datas.areaStatus = this.areaStatus
      datas.areaApprovalProblem = this.areaApprovalProblem
      datas.envStatus = this.envStatus
      datas.envApprovalProblem = this.envApprovalProblem
      datas.elseProblem = this.elseProblem
      datas.needDeptProblem = this.needDeptProblem
      datas.createUser = this.createUser
      datas.createTel = this.createTel
      datas.createTime = this.createTime
      datas.updateUser = this.updateUser
      datas.updateTel = this.updateTel
      datas.updateTime = this.updateTime
      datas.buildApprovalNum = this.buildApprovalNum
      datas.buildLicenseNum = this.buildLicenseNum
      datas.buildNode = this.buildNode
      datas.planApprovalNum = this.planApprovalNum
      datas.planLicenseNum = this.planLicenseNum
      datas.planNode = this.planNode
      datas.areaApprovalNum = this.areaApprovalNum
      datas.areaLicenseNum = this.areaLicenseNum
      datas.areaNode = this.areaNode
      datas.envApprovalNum = this.envApprovalNum
      datas.envLicenseNum = this.envLicenseNum
      datas.envNode = this.envNode
      datas.actPermission = this.actPermission

      if (this.buildOverTime) {
        var d1 = new Date(this.buildOverTime)
        datas.buildOverTime = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate()
      }
      if (this.planOverTime) {
        var d2 = new Date(this.planOverTime)
        datas.planOverTime = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate()
      }
      if (this.areaOverTime) {
        var d3 = new Date(this.areaOverTime)
        datas.areaOverTime = d3.getFullYear() + '-' + (d3.getMonth() + 1) + '-' + d3.getDate()
      }
      if (this.envOverTime) {
        var d4 = new Date(this.envOverTime)
        datas.envOverTime = d4.getFullYear() + '-' + (d4.getMonth() + 1) + '-' + d4.getDate()
      }
      // if (
      //   datas.username &&
      //   datas.login &&
      //   datas.status &&
      //   datas.pw &&
      //   datas.pw2 &&
      //   datas.pw === datas.pw2
      // ) {
        if (this.title === '新增') {
          this.$store
            .dispatch('UserAdd', datas)
            .then((response) => {
              this.$message('新增成功')
              this.dialogFormVisible = false
              this.queryList()
            })
            .catch(() => {
              this.$message('新增失败')
            })
        } else {
          this.$store
            .dispatch('UserUpdate', datas)
            .then(() => {
              this.$message('修改成功')
              this.dialogFormVisible = false
              this.queryList()
            })
            .catch(() => {
              this.$message('修改失败')
            })
        }
      // } else {
      //   this.$message('请确认输入完整内容')
      // }
    },
    // 4.1)批量选择
    byIds(res) {
      if (res.length) {
        for (let i = 0; i < res.length; i++) {
          var ids
          if (!ids) {
            ids = res[i].userid
          } else {
            ids = ids + ',' + res[i].userid
          }
          this.userids = ids
        }
      } else {
        this.userids  = ''
      }
      return this.userids
    },
    // 4.2)批量删除
    deleteAll() {
      if (!this.userids) {
        this.$message('请选择要删除的数据')
      } else {
        this.$store.dispatch('UserDelete', this.userids).then(() => {
          this.$message('删除成功')
          this.queryList()
        }).catch(() => {
          this.$message('失败')
        })
      }
    },
    // 5.1)选页数
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
    },
    // 5.2)选条数
    handleCurrentChange(val) {
      this.pageNum = val
      this.queryList()
    }
  },
  created() {
    this.queryList()
  }
}
</script>
<style scoped>
.cell {
  text-align: center;
}
.table_border {
    width: 100%;
    border: 0.06rem solid #ebeef5;
  }

  .table_border td {
    padding: 0.5rem;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
  }

  .t_left {
    width: 20%;
  }
</style>
